/*!
 * @(#) HomePage.scss
 * 版权声明 厦门畅享信息技术有限公司, 版权所有 违者必究
 *
 * <br> Copyright:  Copyright (c) 2020
 * <br> Company:厦门畅享信息技术有限公司
 * <br> @author lihui
 * <br> 2020-08-17 10:25:25
 */
@import "../../../../assets/sass/base";
@mixin title{
  font-size: 14px;
  padding:8px 14px;
  font-weight: bold;
  border-bottom: 2px solid $color-blue;
  color: $color000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@mixin content{
  span{
    font-size: 12px;
    display: inline-block;
    padding-left: 10px;
    color: $color999;
  }
  img{
    vertical-align: bottom;
  }
  p{
    font-size: 24px;
    font-weight: bold;
    color: $color000;
    margin-bottom: 10px;
    cursor: pointer;
  }
}
@mixin select-box{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 400 !important;
  >div{
    margin-right: 6px;
    .ant-select{
      height: 26px;
      .ant-select-selection--single{
        height: 26px !important;
        .ant-select-selection__rendered{
          line-height: 26px;
        }
      }
      .ant-select-selection-selected-value{
        font-size: 12px;
        color: #000;
        line-height: 24px;
      }
    }
  }
  >span{
    margin-right: 6px;
    font-size: 12px;
  }
  >button{
    height: 26px;
    line-height: 25px;
  }
}
:global{
  .home-page-li{
    font-size: 12px;
    color: #000;
    line-height: 18px;
  }
  .home-page{
    min-width: 960px;
    padding:15px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    p{
      margin: 0;
    }
    >div{
      background: #ffffff;
      box-sizing: border-box;
    }
    >div:nth-child(1){
      font-size: 14px;
      .title{
        @include title;
        padding: 10.5px 14px;
      }
      .first-box{
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
        text-align: center;
        img{
          display: block;
          margin: 25px auto;
        }
        p{
          margin-top:10px;
          //font-weight: 600;
          font-size: 16px;
          color: $color999;
        }
        span{
          font-size: 34px;
          font-weight: bold;
          cursor: pointer;
          color: $color000;
          &:hover{
            color: $color-blue;
          }
        }
        >div{
          width: 49%;
        }
        >div:nth-child(1){
          border-right: $border-color;
        }
      }
    }
    >div:nth-child(2) {
      .title{
        @include title;
        .select-box{
          @include select-box;
        }
      }
      .second-box{
        display: flex;
        justify-content: flex-start;
        padding: 10px 0;
        >div{
          box-sizing: border-box;
          border-right: $border-color;
        }
        >div:first-child{
          padding-left: 20px;
          @include content;
          p{
            cursor: auto;
          }
        }
        >div:last-child{
          border-right: none;
          p{
            margin-bottom: 0;
          }
        }
      }
    }
    >div:nth-child(3) {
      .title{
        @include title;
        padding: 10.5px 14px;
      }
      .thirdly-box{
        padding: 20px;
        .ant-timeline-item-content{
          @include content;
          p{
            &:hover{
              color: $color-blue;
            }
          }
          >div{
            padding-top: 3px;
          }
          position: relative;
          strong{
            position: absolute;
            left: -36px;
            top:2px;
            color: $color-blue;
            font-size: 18px;
          }
        }
        .ant-timeline-item-head{
          width: 30px !important;
          height: 30px !important;
          background: #EAF9FF;
          border: inherit;
        }
        .ant-timeline-item-tail{
          left: 14px !important;
          background: #EAF9FF !important;
        }
        .ant-timeline-item-content{
          margin-left: 45px;
          top:0 !important;
        }
      }
    }
    >div:nth-child(4) {
      .title{
        @include title;
        .select-box{
          @include select-box;
        }
      }
      .fourthly-box{
        display: flex;
        justify-content: flex-start;
        height: 88%;
        padding-top: 15px;
        >div{
          box-sizing: border-box;
          width: 50%;
        }
        >div:first-child{
          border-right: $border-color;
        }
      }
    }
  }
}
